<template>
  <div class="carouselImageComponent" v-if="oItem">
    <div
      class="imageSwiper"
      :class="
        oItem.main.carouselDotsPositionCls +
        ' ' +
        oItem.main.carouselDotsStyleCls +
        (oItem.main.carouselList.length == 1 ? ' noIndicators' : '')
      "
      :style="{
        paddingTop: oItem.main.paddingTop + 'px',
        paddingBottom: oItem.main.paddingBottom + 'px',
        paddingLeft: oItem.main.paddingLR + 'px',
        paddingRight: oItem.main.paddingLR + 'px',
      }"
    >
      <el-carousel
        trigger="click"
        :indicator-position="oItem.main.indicatorPosition"
        :height="oItem.main.wrapperHeight + 'px'"
        :interval="oItem.main.interval * 1000"
        :type="oItem.main.type"
        :direction="oItem.main.direction"
        :autoplay="oItem.main.autoplay"
        :loop="oItem.main.loop"
        :indicatorsActiveColor="oItem.main.carouselDotsHighLightColor"
        :style="{
          borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
          borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
          borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
        }"
      >
        <el-carousel-item
          v-for="(cl, clIndex) in oItem.main.carouselList"
          :key="cl.id"
        >
          <img
            :src="cl.imgUrl ? cl.imgUrl : cl.default"
            alt=""
            @load="imageSwiperItemImgLoad($event, clIndex)"
          />
        </el-carousel-item>
        <span
          class="indicatorsStyleNumberInfo"
          v-if="oItem.main.carouselDotsStyleCls == 'indicatorsStyleNumber'"
          >{{ oItem.main.listIndex + 1 }}/{{
            oItem.main.carouselList.length
          }}</span
        >
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "carouselImageComponent",
  data() {
    return {
      oItem: null,
    };
  },
  props: ["item", "ename", "id"],
  components: {},
  created() {},
  mounted() {
    // this.$nextTick(() => {
      this.init();
    // });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
    //轮播图组件中，图片加载后，获取图片高度
    imageSwiperItemImgLoad(e, clIndex) {
      // //console.log(e);
      // if (clIndex === 0) {
      //     let h = e.path[0].offsetHeight;
      //     let controls = JSON.parse(JSON.stringify(this.decorate.controls));
      //     controls[this.controlsIndex].right[this.rightIndex].catalog[this.catalogIndex].list[clIndex].height = h;
      //     this.$store.dispatch("controls", controls);
      // }
      // this.controls[index].list[clIndex].height = e.path[0].offsetHeight + "px"; //暂时以第一张的图片的高度为组件高度，此句先注释
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>

<style scoped lang="scss">
.carouselImageComponent {
  box-sizing: border-box;
  .el-carousel__container {
    position: relative;
    .indicatorsStyleNumberInfo {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 0 5px;
      border-radius: 50px;
      font-size: 10px;
      bottom: 10px;
      z-index: 2;
    }
  }
  .indicatorsLeft {
    .indicatorsStyleNumberInfo {
      left: 5%;
    }
  }
  .indicatorsRight {
    .indicatorsStyleNumberInfo {
      right: 5%;
    }
  }
  .indicatorsCenter {
    .indicatorsStyleNumberInfo {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}
</style>

<style lang="scss">
.carouselImageComponent {
  .el-carousel__button {
    width: 15px;
    border-radius: 5px;
    height: 4px;
  }
  .indicatorsLeft {
    .el-carousel__indicators {
      left: 5%;
      transform: none;
    }
  }
  .indicatorsRight {
    .el-carousel__indicators {
      left: auto;
      right: 5%;
      transform: none;
    }
  }
  .indicatorsStyleDot {
    .el-carousel__button {
      width: 8px;
      border-radius: 100%;
      height: 8px;
    }
  }
  .indicatorsStyleNumber,
  .noIndicators {
    .el-carousel__indicators {
      display: none;
    }
  }
}
</style>
